<template>
  <Transition name="alert">
    <div
      class="dh-alert"
      :class="{
        [`dh-alert--${type}`]: type,
        [`is-${effect || 'light'}`]: effect || 'light',
      }"
      v-if="!isClose"
    >
      <div class="left">
        <Icon :icon="icon" v-if="icon"></Icon>
        <span>
          <slot></slot>
        </span>
      </div>
      <Icon icon="times" v-if="closable" @click="closeAlert"></Icon>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Icon from "../Icon/Icon.vue";
import type { AlertProps } from "./type";
defineOptions({
  name: "Alert",
});
let isClose = ref(false);
defineProps<AlertProps>();

const closeAlert = () => {
  isClose.value = true;
};
</script>

<style scoped></style>
